<template>
    <div class="food-favorites">
      <header-component />
      
      <h2>Food Favorites</h2>
      <h4>Shop for your favorite food here.</h4>
  
      <ul>
        <li v-for="product in itemList" :key="product.itemId">
          <router-link :to="`/item/${product.itemId}`">{{ product.productName }}</router-link>
          ({{ product.itemId }})
        </li>
      </ul>
  
      <footer-component />
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import { getFavoriteItems } from '@/api/product';
  import "@/assets/css/global.css";
  export default {
    setup() {
      const itemList = ref([]);
  
      const fetchFavorites = async () => {
        try {
          const response = await getFavoriteItems();
          itemList.value = response.data.data;
        } catch (error) {
          console.error('Error fetching favorites:', error);
        }
      };
  
      onMounted(fetchFavorites);
  
      return { itemList };
    }
  };
  </script>
